<template>
  <div class="product">
    <div class="lunbo">
      <van-swipe :autoplay="3000">
        <van-swipe-item>
          <img v-lazy="goods.goodsCoverImg"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="message">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <div class="price">
            <span class="rawprice">{{ goods.sellingPrice | pricefmt }}</span>
            <span class="sellprice">{{ zkj | pricefmt }}</span>
          </div>
          <span>{{ goods.goodsName }}</span>
        </div>

        <el-steps
          simple
          space="10"
        >
          <el-step
            title="品牌旗舰"
            icon="el-icon-circle-check"
          ></el-step>
          <el-step
            title="包邮"
            icon="el-icon-circle-check"
          ></el-step>
          <el-step
            title="运费宝"
            icon="el-icon-circle-check"
          ></el-step>
          <i class="el-icon-arrow-right"></i>
        </el-steps>
      </el-card>

      <el-card class="box-card2">
        <div
          v-for="o in 1"
          :key="o"
          class="text item"
        >
          <!-- 优惠券单元格 -->
          <van-coupon-cell
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            @click="showList = true"
          />
          <!-- 优惠券列表 -->
          <van-popup
            v-model="showList"
            round
            position="bottom"
            style="height: 90%; padding-top: 4px"
          >
            <van-coupon-list
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              :disabled-coupons="disabledCoupons"
              @change="onChange"
              :show-exchange-bar="false"
            />
          </van-popup>
        </div>
      </el-card>

      <el-card class="box-card3">
        <div
          v-for="o in 1"
          :key="o"
          class="text item"
        >
          <div class="xq">
            <span>概述</span>
            <el-divider direction="vertical"></el-divider>
            <span>参数</span>
            <el-divider direction="vertical"></el-divider>
            <span>安装服务</span>
            <el-divider direction="vertical"></el-divider>
            <span>常见问题</span>
          </div>
        </div>
      </el-card>

      <el-card class="box-card4">
        <div
          v-for="o in 1"
          :key="o"
          class="text item"
        >
          <div
            class="img-box"
            v-html="goods.goodsDetailContent"
          ></div>
        </div>
      </el-card>

      <van-goods-action>
        <van-goods-action-icon
          icon="chat-o"
          text="客服"
        />
        <van-goods-action-icon
          icon="shop-o"
          text="店铺"
        />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :info="getAllCount"
          to="/cart"
        />
        <van-goods-action-button
          color="#018dd699"
          type="warning"
          text="加入购物车"
          @click="addcart"
        />
        <van-goods-action-button
          color="#018bd5"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { getgoodsInfo } from '../../api/home'
import { mapState, mapGetters } from 'vuex'

export default {
  props: ['id'],
  data() {
    return {
      Info: [],
      goodsInfo: {},
      chosenCoupon: -1,
      showList: false,
      coupons: [],
      disabledCoupons: [],
      coupon: [],
      goods: {},
      raw: JSON.parse(localStorage.getItem('goods')).sellingPrice,
      value: 1
    }
  },
  computed: {
    count() {
      return JSON.parse(localStorage.getItem('goodsinfo'))
    },
    zkj() {
      return parseInt((this.goods.sellingPrice) * 1.4)
    },
    goodsId() {
      return localStorage.getItem('goodsId')
    },
    ...mapState('yhq', ['defaultCoupon']),
    ...mapState('yhq', ['couponList']),
    ...mapGetters('cart', ['getAllCount']),
    ...mapState('cart', ['userlist'])
  },
  methods: {
    async getgoodsInfo(id) {
      const res = await getgoodsInfo()
      this.Info = res.data.filter((element) => {
        return element.goodsId === parseInt(id)
      })
      this.goodsInfo = JSON.stringify(this.Info[0])
      localStorage.setItem('goods', this.goodsInfo)
      this.goods = JSON.parse(localStorage.getItem('goods'))
      this.raw = JSON.parse(localStorage.getItem('goods')).sellingPrice
      if (this.raw < 1000) {
        this.disabledCoupons.push(this.couponList[0])
      } else if (this.raw < 10000) {
        this.coupons.push(this.couponList[0])
        this.disabledCoupons.push(this.couponList[1])
      } else {
        this.coupons = this.couponList
      }
    },
    onChange(index) {
      this.showList = false
      this.chosenCoupon = index
      if (index === -1) {
        this.goods.sellingPrice = this.raw
        localStorage.setItem('goods', JSON.stringify(this.goods))
      } else {
        this.coupon = this.coupons[index]
        const sum = this.raw
        this.goods.sellingPrice = sum - parseInt(this.coupon.valueDesc)
        localStorage.setItem('goods', JSON.stringify(this.goods))
      }
    },
    addcart() {
      const goodsInfo = {
        id: this.goods.goodsId,
        img: this.goods.goodsCoverImg,
        price: this.goods.sellingPrice,
        count: this.value,
        title: this.goods.goodsName,
        checked: true,
        timer: null,
        userid: this.userlist.userid
      }
      this.$store.commit('cart/ADD_CART', goodsInfo)
    }
  },
  created() {
    this.getgoodsInfo(this.id)
    this.chosenCoupon = this.defaultCoupon
  }
}
</script>

<style lang="scss">
.product {
  img {
    width: 100%;
  }

  .van-coupon__name {
    font-size: 18px;
  }

  .van-coupon__description {
    color: rgb(255, 60, 60);
    font-size: 16px;
  }

  .el-steps--simple {
    padding: 0px 2%;
    height: 35px;
    background: #f5f5f5;
    display: flex;
    justify-content: right;

    .el-step.is-simple {
      width: 125px;
    }
  }

  .message {
    width: 95%;
    margin: 0 auto;

    .box-card4 {
      margin-top: 6px;
    }

    .box-card3 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      margin-top: 10px;

      .img-box {
        img {
          width: 100%;
          height: 100%;
        }

        p {
          margin-top: 2px !important;
        }
      }

      .item {
        margin-bottom: 0px;
      }

      .xq {
        .el-divider {
          background-color: #6e6e6e;
          margin: 0 20px;
        }

        display: flex;
        align-items: center;

        span {
          font-size: 14px;
        }
      }
    }

    .box-card2 {
      margin-top: 10px;
      margin-bottom: 0px;
      padding: 12px 8px;
      border-bottom: 1px solid #ebeef5;
      box-sizing: border-box;
      line-height: 60px;
      height: 50px;
      padding: 0;

      .text {
        margin-bottom: 0;
      }
    }

    .mesageList {
    }

    .text {
      font-size: 13px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .el-card__body {
      padding: 0px;
    }

    .box-card {
      padding: 0;

      .el-card__header {
        padding: 12px 8px;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;

        .price {
          margin-bottom: 6px;

          .rawprice {
            font-size: 19px;
            font-weight: 600;
            color: rgb(255, 85, 85);
          }

          .sellprice {
            margin-left: 10px;
            text-decoration: line-through;
            font-weight: 200;
            font-size: 16px;
            color: #6e6e6e;
          }
        }

        span {
          font-size: 14px;
          font-weight: 700;
        }
      }

      .el-icon-arrow-right {
        font-size: 18px;
        color: #83868d;
        line-height: 35px;
      }

      .el-step {
        .el-step__arrow {
          display: none;
        }

        .el-step__head {
          color: #83868d;
        }

        span {
          font-size: 12px;
          color: #83868d;
        }

        .el-step__title {
          max-width: none;
          font-size: 12px;
          color: #83868d;
        }
      }
    }
  }

  background-color: #f5f5f5;

  .van-swipe-item {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .el-step.is-simple .el-step__icon {
    z-index: 0;
  }
}
</style>
